$(function () {
    // 距离浏览器顶端多少距离开始显示goToTop按钮，这个距离也可以修改，但不能超过浏览器默认高度，为了兼容不同分辨率的浏览器，我建议在这里设置值为1；
    let showDistance = 1;
    // 定义一个变量，方便后面加入在html元素标签中插入这个goToTop按钮的标签
    let goToTopButton = $('<div id="goToTop">' +
        '<svg class="bi bi-chevron-up text-white" width="24px" height="24px" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">\n' +
        '    <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>\n' +
        '</svg>' +
        '</div>');
    $('body').css({"position": "relative"});
    $('body').append(goToTopButton);
    if ($(window).scrollTop() < showDistance) {
        $('#goToTop').hide();
    }
    // 给窗口绑定一个滚动事件，当窗口滚动条滚动时执行
    $(window).scroll(() => {
        $(this).scrollTop() > showDistance ? $('#goToTop').fadeIn() : $('#goToTop').fadeOut();
    });
    // 给按钮绑定一个click事件，点击按钮时，返回顶部
    $('#goToTop').click(() => {
        $('html, body').animate({"scrollTop": 0}, 300);
        return false;
    });
});